<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-06-29 20:00:29
 * @FilePath: \YMU_forum_vue\src\views\User\components\left\UserPassword.vue
 * @Description: 用户修改密码
-->

<script setup>
import { ref } from 'vue';
import {updatePassword} from '@/apis/user.js'
import { ElMessage } from 'element-plus'
import {useAccountStore} from '@/stores/useAccountStore'
import {useRouter} from 'vue-router'

const userAcountStore = useAccountStore()
const router = useRouter()
const psd = ref({
    oldPassword:'',
    newPassword:''
})
const newpwd2 = ref('')
const updatePsd = ()=>{
    if(psd.value.newPassword!=newpwd2.value){
        ElMessage.error('两次新密码不一致')
        return
    }
    updatePassword(psd.value).then(res=>{
        if(res.code!=0){
            ElMessage.error(res.msg)
        }else{
            ElMessage.success('密码修改成功,请重新登录！')
            userAcountStore.clearCacheAndRestoreDefault()
            router.push('/login')
        }
    })
}
</script>

<template>
    <div>
        <el-card shadow="hover" class="collapse">
            <el-collapse accordion>
                <el-collapse-item name="1">
                    <template #title>
                        修改密码
                    </template>
                    <div>
                        <el-input class="input" v-model="psd.oldPassword" type="oldpwd" placeholder="输入旧密码" show-password />
                    </div>
                    <div style="margin-top: 20px;">
                        <el-input class="input" v-model="psd.newPassword" type="newpwd" placeholder="输入新密码" show-password />
                    </div>
                    <div style="margin-top: 20px;">
                        <el-input class="input" v-model="newpwd2" type="newpwd" placeholder="再次输入" show-password />
                    </div>
                    <div style="margin-top: 20px;">
                        <el-button type="primary" @click="updatePsd" style="margin-bottom: 15px;">
                            提交
                        </el-button>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>
</template>

<style scoped>
.input {
    height: 35px;
}

.collapse {
    margin-top: 21px;
    width: 100%;
    border-radius: 7px;
}
</style>
  

  